<!--  ERC-设备管理-设备台账页面-树形弹窗页面弹窗页面 -->
<template>
  <px-dialog v-model="TreedialogVisible" class="equip-dialog" :title="typeTitle" width="640px" @open="openDialog" @close="closeDialog">
    <px-form ref="formRef" :model="formValue" :rules="rules" label-position="right" label-width="120px">
      <px-form-item label="物资类型" prop="name">
        <px-input v-model="formValue.name" placeholder="请输入" maxlength="50" clearable>
          <!-- <template #prepend>{{ dialogRow.name }}/</template> -->
        </px-input>
      </px-form-item>
    </px-form>
    <div class="equip-dialog-footer">
      <px-button @click="closeDialog">取消</px-button>
      <px-button type="primary" @click="handleSubmit(formRef)">确定</px-button>
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, toRefs, computed } from "vue";
import { PxMessage } from "px-ui";
import { addTreeMaterial, editTreeMaterial } from "@/api/erc/material";

// 调用父级-关闭弹窗、查询列表方法
const emits = defineEmits(["closeDialog", "queryTable", "queryTree"]);
// 父级传过来的值
const props = defineProps({
  // 控制弹窗显示隐藏
  TreedialogVisible: {
    type: Boolean,
    default: false
  },
  // 弹窗类型 add 新增 edit 编辑
  dialogType: {
    type: String,
    default() {
      return "add";
    }
  },
  // 表单数据
  dialogRow: {
    type: Object,
    default() {
      return {};
    }
  }
});
const TreedialogVisible = computed(() => props.TreedialogVisible);
// 页面本身的值
const formRef = ref();
const state = reactive<any>({
  typeTitle: "新增物资类型",
  formValue: {
    name: "",
    parentCode: "",
    pcode: ""
  }
});
const { formValue, typeTitle } = toRefs(state);
// 表单校验规则
const rules = computed(() => ({
  name: [{ required: true, message: "物资名称不能为空", trigger: ["blur", "change"] }]
}));

// 打开弹窗
const openDialog = async () => {
  console.log(props.dialogRow);

  formRef.value.resetFields();
  if (props.dialogType === "add") {
    typeTitle.value = "新增物资类型";
    formValue.value.pcode = "";
    formValue.value.parentCode = "";
  } else if (props.dialogType === "edit") {
    typeTitle.value = "编辑物资类型";
    const { name, parentCode, code } = props.dialogRow;
    formValue.value.name = name;
    formValue.value.pcode = parentCode || "";
    formValue.value.parentCode = code || 0;
  }
};
// 关闭弹窗
const closeDialog = () => {
  formValue.value = {
    pcode: "",
    name: "",
    parentCode: ""
  };
  emits("closeDialog");
};
// 提交
const handleSubmit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      if (props.dialogType === "add") {
        await addTreeMaterial({
          name: formValue.value.name,
          pcode: props.dialogRow.parentCode || "",
          parentCode: props.dialogRow.code || 0
        });
        PxMessage.success("新增成功");
        emits("closeDialog");
        emits("queryTree");
      } else if (props.dialogType === "edit") {
        const params = formValue.value;
        // await editTreeMaterial({ ...params, code: 1 });
        await editTreeMaterial({
          name: formValue.value.name,
          code: props.dialogRow.code,
          parentCode: props.dialogRow.parentCode || 0
        });
        PxMessage.success("编辑成功");
        emits("closeDialog");
        emits("queryTree");
      }
    }
  });
};
</script>
<style lang="scss" scoped>
.equip-dialog {
  .equip-dialog-footer {
    margin-top: 108px;
    text-align: right;
  }
}
</style>
